<template>
  <div>
    <!-- 头部 -->
    <p-head></p-head>
    <!-- 横通 -->
    <div class="tips">
      <img src="../../img/casetips.jpg" alt="" />
      <div class="tips_title">
        <h1>案例</h1>
        <h2>CASE</h2>
      </div>
    </div>
    <div class="caseDetail layout">
      <div class="dhead">
        <h2>{{ casedata.title }}</h2>
        <h3>项目概述</h3>
        <div class="describe">{{ casedata.introduction }}</div>
       <template v-if="casedata.svcontent.length>0">
        <h3>服务内容</h3>
        <div class="dhead_list">
          <ul>
            <template v-for="name in casedata.svcontent" >
               <li>{{name}}</li>
            </template>
            <!-- <li>前期策划</li>
            <li>网页设计</li>
            <li>前端开发</li>
            <li>后台开发</li>
            <li>网站维护</li>
            <li>网站优化</li> -->
          </ul>
        </div>
        </template>
        <div class="dhead_btn">
          <template v-if="casedata.neturl">
            <a :href="casedata.neturl" target="_blank">
              <div class="dhead_btn1">
                <p>浏览网站</p>
                <span class="iconfont yf-icon--_jiantou"></span>
              </div>
            </a>
          </template>
          <!-- <template v-else>
            <div class="dhead_btn1" @click="noNetword()">
              <p>浏览网站</p>
              <span class="iconfont yf-icon--_jiantou"></span>
            </div>
          </template> -->
          <div class="dhead_btn2" @click="toLinxi">
            <span class="iconfont yf-icon-kefu"></span>
            <p>联系我们</p>
          </div>
        </div>
      </div>
      <div class="dbody">
        <template v-if="casedata.content">
          <div class="meeting-detail-intro" v-html="casedata.content"></div>
        </template>
        <template v-else>
          <div class="meeting-detail-intro" v-html="casedata.introduction"></div>
        </template>
      </div>
      <div class="dbtn">
        <template v-if="prev.id">
          <div class="dbtn1" @click="prevdata(prev.id)">
            上一篇<span>：{{ prev.title }}</span>
          </div>
        </template>
        <div class="dbtn2" @click="toCase">
          <span class="iconfont yf-icon-yingyong_0"></span>
          <p>返回列表</p>
        </div>
        <template v-if="next.id">
          <div class="dbtn3" @click="nextdata(next.id)">
            下一篇<span>：{{ next.title }}</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 案例推荐 -->
    <h2 class="caseRecommend">案例推荐</h2>

    <div class="casebanner">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="k in Math.ceil(tuijian.length / 3)" :key="k">
          <ul class="CASE">
            <li
              class="case_card"
              v-for="item in tuijian.slice((k - 1) * 3, k * 3)"
              :key="item.id"
            >
              <div class="cc_detail" @click="toCasedetail(item.id)">
                <div class="cc_detailpic">
                  <img :src="item.thumb" alt="" />
                </div>
                <div class="cc_detailtitle">
                  <div>
                    <h3>{{ item.title }}</h3>
                    <p>中文 / 响应式网站</p>
                  </div>
                  <div class="iconfont yf-icon-lianjie"></div>
                </div>
                <div class="cc_detailto">
                  <router-link
                    :to="{
                      path: '/casedetail',
                      query: { case_id: item['id'] },
                    }"
                  >
                    <span>Details</span></router-link
                  >
                  <span class="iconfont yf-icon-yanjing"
                    >&nbsp;&nbsp;{{ item.reading }}</span
                  >
                </div>
              </div>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 底部 -->
    <p-foot></p-foot>
  </div>
</template>
<script>
import {} from "../../http/api";
import { get } from "@/http/request";
import {errorAlert} from "@/utils/alert";
export default {
  
  name: "MeetingDetailIntro",
  components: {},
  props: [],
  data() {
    return {
      casedata: [],
      prev: [],
      next: [],
      tuijian: [],
      caselist: [],
      pa: 1,
    };
  },
  methods: {
    /***获取案例详情数据**/
    getdatalist(case_id) {
      get("/api/home/getArtInfo", { id: case_id })
        .then((res) => {
          console.log( res.data.food)
          if (res.data.code == 200) {
            console.log(res.data);
            this.casedata = res.data.food;
            this.prev = res.data.food.prev;
            this.next = res.data.food.next;
            this.tuijian = res.data.food.tuijian;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nextdata(newid) {
      this.getdatalist(newid);
    },
    prevdata(newid) {
      this.getdatalist(newid);
    },
    toCase() {
      this.$router.push({ path: "/case" });
    },
    toLinxi() {
      this.$router.push({ path: "/relation" });
    },
    toCasedetail(caseid) {
      this.$router.push({ path: "/casedetail", query: { case_id: caseid } });
    },
    noNetword(){
      errorAlert("改项目不是网站,请先关注在查看内容!");
    }
  },
  mounted() {
    get("/api/home/getall", { page: 1, limit: 6 })
      .then((res) => {
        if (res.data.code == 200) {
          this.banner = res.data.banner;
          this.caselist = res.data.case.list;
          this.total = res.data.case.total;
          this.pa = Math.ceil(this.total / 3);
          console.log(this.pa);
          this.case_nav = res.data.case.case_nav;
          this.allpage = Math.ceil(this.total / this.limit);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    let case_id = this.$router.app._route.query.case_id;
    this.getdatalist(case_id);
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
@import "../../assets/css/reset.css";
.meeting-detail-intro {
  ::v-deep {
    img {
      max-width: 100%;
    }
  }
}
.caseDetail {
  width: 70%;
  margin-top: 20px;
  margin-bottom: 40px;
}
.dhead {
  box-sizing: border-box;
  width: 100%;
  //   height: 510px;
  border: 1px solid #f5f5f5;
  // background-color: pink;
  padding: 0 40px;
}
.dhead h2 {
  text-align: center;
  font: 28px "微软雅黑";
  margin-top: 60px;
  margin-bottom: 34px;
}
.dhead h3 {
  font: 18px "微软雅黑";
  color: #333;
}
.dhead .describe {
  height: 100%;
  width: 100%;
  padding-top: 26px;
  margin-bottom: 26px;
  box-sizing: border-box;
  font: 14px/24px "微软雅黑";
  color: #888888;
  overflow: hidden;
}
.dhead_list {
  width: 100%;
}
.dhead_list ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.dhead_list ul li {
  width: 120px;
  height: 38px;
  border: 1px solid #f5f5f5;
  font: 14px/38px "微软雅黑";
  color: #666666;
  margin-left: 20px;
  margin-top: 24px;
  text-align: center;
}
.dhead_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.dhead_btn div {
  width: 240px;
  height: 56px;
  margin-top: 40px;
  text-align: center;
}
.dhead_btn1 {
  margin-left: 20px;
  background-color: #3d6afe;
  font: 16px/56px "微软雅黑";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dhead_btn1 span {
  margin-left: 40px;
  font-size: 30px;
}
.dhead_btn2 {
  margin-left: 20px;
  background-color: #dddddd;
  font: 16px/56px "微软雅黑";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dhead_btn2 span {
  margin-right: 40px;
  font-size: 20px;
  margin-top: 2px;
}
.dhead_btn div:hover {
  background-color: #3d6afe;
  cursor: pointer;
}
.dbody {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  border: 1px solid #f6f6f6;
  box-shadow: 0px 20px 20px 20px #f6f6f6;
  margin-bottom: 60px;
}
.dbody:hover {
  margin-top: 30px;
  transition: 0.6s;
}
.dbtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.dbtn div {
  width: 240px;
  height: 60px;
  margin-top: 40px;
  text-align: center;
  overflow: hidden;
}
.dbtn2 {
  background-color: #3d6afe;
  font: 16px/60px "微软雅黑";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dbtn1,
.dbtn3 {
  background-color: #dddddd;
  font: 16px/60px "微软雅黑";
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // text-align: center;
}
.dbtn2 span {
  margin-right: 14px;
  font-size: 20px;
  margin-top: 2px;
}
.dbtn div:hover {
  background-color: #3d6afe;
  cursor: pointer;
}
.casebanner {
  height: 490px;
  width: 80%;
  margin: 0 auto;
}
/deep/.casebanner .el-carousel {
  height: 100%;
  width: 100%;
  .el-carousel__container {
    height: 90%;
    width: 100%;
    overflow: hidden;
  }
}
/deep/.el-carousel__item {
  height: 100%;
  background-color: #fff;
}
.CASE {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  .case_card {
    width: 31%;
    border: 1px solid #f5f5f5;
    .cc_detail {
      width: 100%;
      height: 100%;
      .cc_detailpic {
        width: 100%;
        height: 55%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .cc_detailtitle {
        width: 100%;
        height: 45%;
        box-sizing: border-box;
        padding: 0 5%;
      }
    }
  }
}

.cc_detailtitle {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.cc_detailtitle h3 {
  font-size: 18px;
  font-weight: blod;
  line-height: 64px;
}
.cc_detailtitle p {
  font-size: 14px;
  color: #555555;
}
.yf-icon-lianjie {
  font-size: 24px;
  color: #787878;
}
.cc_detailto {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #fff;
}
.cc_detailto span {
  font-size: 14px;
  color: #929292;
}

/deep/.el-carousel__indicators--horizontal {
  position: absolute;
  left: auto;
  right: 45%;
  bottom: 10px;
  text-align: right;

  .el-carousel__indicator--horizontal button {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid #f1f1f1;
    opacity: 0.8;
  }

  .el-carousel__indicator--horizontal.is-active button {
    width: 12px;
    height: 12px;
    background: #ffffff;
    opacity: 0.8;
    border: 2px solid #426efe;
    // background-color: #426efe;
    border-radius: 10px;
  }
}
.caseRecommend {
  font-size: 36px;
  text-align: center;
  margin-bottom: 56px;
  color: #333333;
  font-weight: normal;
}
@media screen and (max-width: 992px) {
  .dhead_btn div,
  .dbtn div {
    width: 140px;
  }
  .dhead_btn2 span {
    margin-right: 15px;
    font-size: 18px;
  }
  .dhead_btn2,
  .dhead_btn1,
  .dbtn1 {
    font-size: 16px;
  }
  .dhead_btn1 span {
    margin-left: 12px;
    font-size: 18px;
  }
  .caseRecommend {
    display: none;
  }
  .casebanner {
    display: none;
  }
  .dbtn1 span,
  .dbtn3 span {
    display: none;
  }
  .dbtn2 {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .caseDetail {
    width: 90%;
  }
  .dhead h2 {
    font-size: 26px;
  }
  .dhead h3,
  .dhead_list {
    display: none;
  }
  .dhead_btn div {
    width: 116px;
  }
}
</style>